@charset "utf-8";
@import "../../../../layout/sass/_mixin-fun.scss";

.inner {
	width: 1020px !important;
}
.goods {
	margin-top: 20px;
	.inner {
		.info {
			width: 100%;
			margin-top: 20px;
			float: left;
			> .left {
				width: 400px;
				position: relative;
				.preview {
					width: 390px;
					position: relative;
					span.sku-dis {
						position: absolute;
						top: 10px;
						left: 10px;
						color: #555;
						font-size: 14px;
						z-index: 10;
					}
					.big-img {
						width: 100%;
						height: 390px;
    					overflow: hidden;
    					border: 1px solid #f2f2f2;
    					> div {
    						text-align: center;
							display: table;
    						table-layout: fixed;
    						width: 100%;
							height: 390px;
    						p {
    							display: table-cell;
	    						width: 100%;
	    						max-height: 100%;
	    						vertical-align: middle;
	    						text-align: center;
	    						position: relative;
	    						img {
									max-width: 100%;
									max-height: 100%;
									position: relative;
								}
	    					}//p
    					}
					}//big-img
					.small-img {
						width: 100%;
						margin-top: 20px;
						li {
							width: 78px;
							height: 78px;
							float: left;
							padding: 8px;
							cursor: pointer;
							&.on {
								img {
									border: 1px solid #efefef;
								}
							}
							img {
								max-width: 100%;
								max-height: 100%;
								display: block;
								margin: 0 auto;
							}
						}//one
					}//small-img
				}//preview
				.flags {
					width: 390px;
					height: 60px;
					overflow: hidden;
					position: absolute;
					top: -11px;
					left: 0;
					padding-right: 12px;
					i.icon {
						display: block;
						float: right;
						margin-left: 4px;
					}
				}
				.bottom {
					margin-top: 20px;
					padding: 0 60px;
					text-align: center;
					.collect, .share {
						display: inline-block;
						padding: 0 30px;
						color: #6E5A4D;
						height: 30px;
						line-height: 30px;
						position: relative;
						font-size: 12px;
						text-decoration: none;
						i.icon {
							display: block;
							position: absolute;
							top: 50%;
							left: 5px;
						}
						span.num {
							color: #555;
							&.active {
								color: $global-color;
							}
							&:hover {
								color: $global-color;
							}
						}
					}//collect, .share
					.collect {
						i {
							margin-top: -15px;
						}
						&.on {
							i.icon-star {
								background-position: -211px -67px;
							}
						}
					}
					.share {
						cursor: pointer;
						i {
							margin-top: -15px;
						}
						span.box {
							display: block;
							position: absolute;
							top: 30px;
							left: 0;
						}
					}
				}//bottom
			}//left
			> .right {
				width: 570px;
				> .title {
					width: 100%;
					font-size: 18px;
					color: #675245;
					line-height: 24px;
					margin-bottom: 18px;
					position: relative;
					padding-left: 36px;
					i {
						position: absolute;
						top: 50%;
						left: -20px;
						margin-top: -12px;
					}
				}//title
				> .top {
					width: 100%;
					margin-bottom: 20px;
					.block {
						color: #555;
						width: 100%;
						line-height: 24px;
						span {
							&.title {
								width: 60px;
								margin-right: 10px;
								overflow: hidden;
							}
							&.num {
								width: 500px;
								overflow: hidden;
							}
						}
					}
					.price , .stock, .supply, .transport, .sku {
						width: 100%;
						margin-bottom: 12px;
					}
					.stock, .supply, .sku {
						span {
							color: $global-color;
							font-weight: 600;
						}
					}
					.price {
						.block {
							background: #fff5ec;
							border-top: 1px solid #de4a4a;
							width: 110%;
						    margin-left: -20px;
						    padding-left: 20px;
							.row {
								height: 55px;
								width: 100%;
								line-height: 55px;
								float: left;
								p.title {
									width: 70px;
									padding-right: 10px;
									float: left;
								}
								p.tp {
									color: #de4a4a;
									font-size: 30px;
									width: 176px;
									float: left;
									i {
										font-size: 18px;
										margin-right: -10px;
									}
								}
								p.to {
									width: 176px;
									float: left;
									color: #555;
									font-size: 12px;
								}
							}//table
						}//block
					}//price
				}//top
				.sku-list {
					width: 100%;
					margin-bottom: 4px;
					border-top: 1px dotted #e5e5e5;
					padding: 20px 0 10px 0;
					.title {
						width: 60px;
						float: left;
						line-height: 30px;
						color: #555;
					}
					.list {
						width: 500px;
						float: right;
						min-height: 40px;
						> a {
							position: relative;
							display: block;
							float: left;
							margin-right: 10px;
							margin-bottom: 10px;
							i {
								position: absolute;
								right: 1px;
								bottom: 1px;
								display: none;
							}
							button {
								cursor: pointer;
								padding: 0 20px;
								background: white;
								border: 1px solid #C9C9C9;
								height: 30px;
								color: #555;
								&.size {
									padding: 0 8px;
									&.active {
										padding: 0 7px;
									}
								}
								&:hover {
									border-color: #de4a4a;
									color: #cc3333;
								}
								&.active {
									border: 2px solid #d0ba93;
									padding: 0 19px;
									& + i {
										display: block;
									}
								}
								&.sel {
									border: 2px solid #de4a4a;
									padding: 0 19px;
									& + i {
										display: none;
									}
								}
								&[disabled="disabled"] {
									color: #cacaca;
									cursor: not-allowed;
									border: 1px solid #cacaca;
								}
							}
						}
					}//list
					&.size {
						padding: 20px 0 0 0;
						position: relative;
						border-bottom: 1px dotted #e5e5e5;
						.title {
							line-height: 39px;
						}
						.list {
							max-height: 119px;
							overflow: hidden;
							.row {
								height: 40px;
								width: 100%;
								border-bottom: 1px dotted #e5e5e5;
								&:last-of-type {
									border-bottom: none;
								}
								> p {
									float: left;
									width: 25%;
									color: #555;
									height: 100%;
									line-height: 39px;
									&.f {
										font-weight: 600;
										width: 20%
									}
									&.l {
										width: 30%;
										position: relative;
										padding-left: 28px;
										input {
											width: 70px;
											height: 28px;
											border: {
												top: 1px solid #e5e5e5;
												bottom: 1px solid #e5e5e5;
											}
											padding: 0 5px;
											text-align: center;
											color: #555;
											position: absolute;
											top: 50%;
											margin-top: -14px;
											left: 28px;
											line-height: 26px;
										}//input
										i {
											position: absolute;
											display: block;
											width: 28px;
											height: 28px;
											border: 1px solid #e5e5e5;
											top: 50%;
											margin-top: -14px;
											line-height: 26px;
											text-align: center;
											cursor: pointer;
											&.sub {
												left: 0;
												> em {
													position: absolute;
													width: 10px;
													height: 2px;
													display: block;
													top: 50%;
													left: 50%;
													margin-top: -1px;
													margin-left: -5px;
													background: #555;
												}						
											}
											&.add {
												left: 98px;
												font-size: 16px;
											}
											&.dis {
												color: #e5e5e5;
												cursor: not-allowed;
												em {
													background: #e5e5e5;
												}
											}
										}
									}//p.l
									&.qty.dis {
										color: #ccc;
									}	
								}//p
							}//row
						}
						span.tar {
							border: {
								left: 1px dotted #e5e5e5;
								right: 1px dotted #e5e5e5;
								bottom: 1px dotted #e5e5e5;
							}
							bottom: -20px;
						    left: 70px;
						    height: 20px;
						    font-size: 12px;
						    width: 60px;
						    text-align: center;
						    color: #555;
						    background: white;
						    z-index: 1;
						    line-height: 16px;
						    position: absolute;
						    cursor: pointer;
						}
					}//size
				}//sku-list
				.order-num {
					width: 100%;
					margin-bottom: 20px;
					> .title {
						width: 60px;
						float: left;
						line-height: 30px;
						color: #555;
					}
					.list {
						width: 500px;
						float: right;
						position: relative;
						> .left {
							width: 300px;
							float: left;
							position: relative;
							will-change: transform;
							.sel-line {
								position: absolute;
								top: 30px;
								left: 0;
								width: 100%;
								height: 31px;
								border: 1px solid #DE4A4A;
								transition: top 0.3s;
								&.t2 {
									top: 60px;
								}
								&.t3 {
									top: 90px;
								}
							}
							table {
								border: 1px solid #C9C9C9;
								font-size: 12px;
								color: #555;
								font-weight: normal;
								th {
									width: 150px;
									padding: 5px 0;
									border: 1px solid #C9C9C9;
									height: 30px;
									text-align: center;
									&.old {
										color: #C9C9C9;
										text-decoration: line-through;
									}
								}
								td {
									@extend th;
								}
							}//table
						}
						> .right {
							width: 200px;
							position: absolute;
							top: 0;
							right: 0;
							height: 100%;
							color: #555;
							font-weight: normal;
							table {
								word-break: break-all;
								table-layout: fixed;
								border: {
									top: 1px solid #C9C9C9;
									right: 1px solid #C9C9C9;
									bottom: 1px solid #C9C9C9;
								}
								color: #555555;
								height: 100%;
								th {
									width: 200px;
									padding: 5px 0;
									height: 30px;
									border: {
										top: 1px solid #C9C9C9;
										right: 1px solid #C9C9C9;
										bottom: 1px solid #C9C9C9;
									}
									&.num {
										width: 80px;
									}
								}
								tr.height {
									width: 200px;
									height: 100%;
									border: {
										top: 1px solid #C9C9C9;
										right: 1px solid #C9C9C9;
										bottom: 1px solid #C9C9C9;
									}
									text-align: center;
									td {
										position: relative;
										&.num {
											border-right: 1px solid #C9C9C9;
										}
										input.num {
											width: 50px;
											height: 26px;
											line-height: 26px;
											text-align: center;
											padding: 0 3px;
											position: absolute;
											top: 50%;
											left: 50%;
											margin-top: -13px;
											margin-left: -25px;
											border: 1px solid #C9C9C9;
										}
										span {
											background: url(/img/icons.png) no-repeat;
											display: block;
											width: 22px;
											height: 22px;
											position: absolute;
											top: 50%;
											margin-top: -11px;
											cursor: pointer;
											&.add {
												right: 15px;
												background-position: -141px -58px;
											}
											&.sub {
												left: 15px;
												background-position: -113px -58px;
											}
										}
									}
								}//tr
							}//table
						}//right
					}//list
				}//order-num
				.total-price {
					margin-top: 40px;
					position: relative;
					.title {
						width: 60px;
						float: left;
						line-height: 40px;
						color: #888888;
					}
					.num {
						float: right;
						line-height: 40px;
						width: 500px;
						color: #555;
						span.price {
							margin-right: 10px;
							font-size: 24px;
							color: #DC4B4E;
						}
					}//num
					.my-cart {
						width: 120px;
						height: 40px;
						color: $global-color;
						line-height: 38px;
						border: 1px solid #c9c9c9;
						padding-left: 46px;
						position: absolute;
						top: 0;
						right: 0;
						font-size: 14px;
						cursor: pointer;
						i {
							position: absolute;
							top: 50%;
							left: 16px;
							margin-top: -12px;
						}
					}//my-cart
					.detail {
						width: 480px;
						border: 1px solid #c9c9c9;
						position: absolute;
						color: $global-color;
						top: 39px;
						right: 0;
						background: white;
						z-index: 10;
						cursor: auto;
						padding: 10px;
						display: none;
						font-size: 12px;
						table {
							width: 100%;
							word-break: break-all;
							table-layout: fixed;
							position: relative;
							tbody {
								position: relative;
								tr {
									position: relative;
									z-index: 2;
									line-height: 30px;
									&.w-top {
										color: #555555;
										border-top: 1px dashed #c9c9c9;
									}
									th.del {
										cursor: pointer;
										color: #dd5759;
									}
									th.old {
										color: #c9c9c9;
									}
								}//tr
								tr.tips {
									color: #dd5759;
									text-align: center;
									height: 60px;
									line-height: 60px;
									position: relative;
									td {
										height: 60px;
										line-height: 60px;
										position: absolute;
										top: 30px;
										left: 0;
										width: 100%;
									}
								}
							}//tbody
						}//table
						.w-top {
							width: 100%;
							color: #555;
							border-bottom: 1px solid #ccc;
							&:last-of-type {
								border-bottom: none;
							}
							.size {
								float: left;
								width: 83.33333%;
								line-height: 30px;
								li {
									width: 100%;
									border-bottom: 1px dotted #e6e6e6;
									&:last-of-type {
										border-bottom: none;
									}
									p {
										float: left;
										width: 20%;
										text-align: center;
										padding: 5px;
										line-height: 30px;
										&.act {
											cursor: pointer;
											&:hover {
												color: $global-color;
											}
										}
									}
								}
							}//size
							.key {
								float: left;
								width: 16.6666%;
								line-height: 30px;
								text-align: center;
								padding: 5px;
								line-height: 30px;
							}
						}
					}//detail
				}//total-price
				.btns {
					margin-top: 40px;
					button.buy {
						margin-left: 70px;
						margin-right: 30px;
						width: 150px;
						height: 40px;
						background: $global-color;
						color: white;
						font-size: 16px;
					}
					button.add-cart {
						width: 150px;
						height: 40px;
						border: 2px solid $global-color;
						color: $global-color;
						font-size: 16px;
						background: white;
					}
				}//btns
			}//right
		}//info
		.explain {
			width: 100%;
			margin-top: 40px;
			float: left;
			border: 1px solid #e6e6e6;
			padding: 10px 20px;
			.block {
				min-width: 260px;
				position: relative;
				float: left;
				margin-right: 10px;
				> .title {
					font-size: 14px;
					margin-bottom: 20px;
					height: 20px;
					line-height: 20px;
					color: #888;
				}//title
				.words {
					height: 20px;
					line-height: 20px;
					span {
						margin-right: 15px;
						display: inline-block;
						line-height: 22px;
						height: 22px;
						color: #555;
						i {
							margin-right: 4px;
							vertical-align: middle;
						}
					}
					i.icon-tips {
						margin-left: 4px;
						margin-top: -3px;
    					vertical-align: middle;
    					cursor: pointer;
					}
				}
				> i {
					display: block;
					height: 100%;
					width: 1px;
					background: #e6e6e6;
					position: absolute;
					top: 0;
					right: 0;
				}
			}//block
		}//explain
		> .left {
			margin-top: 40px;
		}
		> .bottom {
			width: 800px;
			margin-top: 40px;
			float: right;
			overflow: hidden;
			> .right {
				width: 100%;
				overflow: hidden;
				.tabs {
					width: 800px;
					border-bottom: 1px solid #CACACA;
					position: relative;
					color: $global-color;
					font-size: 16px;
					background: white;
					&.scroll {
						p.price {
							display: block;
						}
					}
					.tab {
						float: left;
						padding: 0 20px;
						height: 100%;
						cursor: pointer;
						height: 40px;
						z-index: 2;
						position: relative;
						line-height: 40px;
						i {
							color: #DD5759;
							font-style: normal;
							position: relative;
							&.border {
								width: 100%;
								height: 4px;
								background: $global-color;
								position: absolute;
								bottom: -1px;
								left: 0;
								display: none;
							}
						}
						&.active {
							i.border {
								display: block;
							}
						}
					}//tab
					p.price {
						position: absolute;
						right: 0;
						top: 0;
						height: 41px;
						padding-right: 5px;
						background: #DE4A4A;
						padding: 0 10px;
						color: white;
						display: none;
						cursor: pointer;
						span {
							line-height: 40px;
							display: block;
							float: left;
						}
						span.num {
							font-size: 18px;
							
						}
						span.price {
							line-height: 40px;
							font-size: 22px;
							margin-right: 20px;
							font-family: Arial;
    						font-weight: 700;
						}
					}//integrity
				}//tabs
				.show-area {
					width: 100%;
					position: relative;
					min-height: 300px;
					.loading {
						width: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1000000000;
						height: 100%;
						background: white;
						img {
							display: block;
							margin: 30px auto;
						}
					}
					.tab-block-1 {
						margin-top: 20px;
						width: 100%;
						.top {
							border-bottom: 1px solid #CACACA;
							color: #555;
							padding: 0 10px;
							p {
								float: left;
								margin-bottom: 14px;
								width: 33.3333%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								padding-right: 20px;
								line-height: 18px;
								label {
									width: 35%;
									color: #999;
								}
								i {
									width: 60%;
									font-style: normal;
								}
							}
						}//top
						> .main {
							padding-top: 20px;
							margin-top: 20px;
							width: 100%;
							overflow: hidden;
							img {
								max-width: 100%;
							}
						}
					}//tab-block-1
					.tab-block-2 {
						width: 100%;
						display: none;
						> .top {
							height: 110px;
							border-bottom: 1px solid #CACACA;
							position: relative;
							> .num {
								left: 20px;
								top: 0;
								padding-top: 14px;
								width: 100px;
								position: absolute;
								p.title {
									color: $global-color;
									font-size: 14px;
									text-align: center;
								}
								p.grade {
									font-size: 30px;
									color: $global-color;
									text-align: center;
									height: 30px;
									line-height: 30px;
									margin-top: 8px;
								}
								p.star {
									width: 90px;
									margin: 0 auto;
									padding-top: 8px;
									span {
										float: left;
										display: inline-block;
										background: url(/img/icons.png) no-repeat;
										width: 18px;
										height: 18px;
										background-position: -165px -69px;
										&.active {
											background-position: -165px -51px;
										}
									}
								}//p.star
							}//num
							i.fence {
								width: 2px;
								height: 50px;
								margin-top: -25px;
								position: absolute;
								top: 50%;
								left: 148px;
								background: #CACACA;
							}
							.selects {
								position: absolute;
								top: 0;
								left: 150px;
								height: 100%;
								width: 650px;
								padding: 28px 150px 0 20px;
								span.select {
									margin-right: 40px;
									margin-bottom: 16px;
									font-size: 12px;
									color: $global-color;
									line-height: 15px;
									display: inline-block;
									cursor: pointer;
									position: relative;
									height: 15px;
									padding-left: 18px;
									i.square {
										display: inline-block;
										width: 15px;
										height: 15px;
										background: white;
										border: 1px solid #A7A7A7;
										top: 0;
										left: 0;
										position: absolute;
										i.sel {
											position: absolute;
											top: 50%;
											left: 50%;
											margin-top: -4px;
											margin-left: -5px;
											display: none;
										}
									}
									i.num {
										color: #DC4B4E;
										margin-left: 5px;
									}
									&.active {
										i.square {
											i.sel {
												display: block;
											}
										}
									}
								}//span.select
								.time-select {
									width: 100px;
									height: 20px;
									color: $global-color;
									position: absolute;
									right: 0;
									top: 26px;
									select {
										width: 100%;
										height: 100%;
										background: none;
										border: none;
										text-align: left;
										text-indent: 10px;
										z-index: 2;
										position: relative;
										line-height: 18px;
										border: {
											top: 1px solid #CACACA;
											left: 1px solid #CACACA;
											bottom: 1px solid #CACACA;
										}
									}
									p {
										border: 1px solid #CACACA;
										position: absolute;
										width: 20px;
										height: 20px;
										top: 0;
										right: 0;
										i {
											position: absolute;
											top: 50%;
											left: 50%;
											width: 0;
											height: 0;
											border: {
												bottom: none;
												top: 6px solid #888888;
												left: 3px solid transparent;
												right: 3px solid transparent;
											}
											margin-left: -3px;
											margin-top: -3px;
										}
									}
								}//time-select
							}//selects
						}//top
						.comment {
							width: 100%;
							position: relative;
							margin-bottom: 120px;
							.one {
								width: 100%;
								padding: 20px 0 20px 60px;
								position: relative;
								border-bottom: 1px solid #CFCFCF;
								overflow: hidden;
								img.head {
									width: 50px;
									height: 50px;
									position: absolute;
									top: 20px;
									left: 0;
								}
								> .name {
									p.star {
										float: left;
										span {
											float: left;
											display: inline-block;
											background: url(/img/icons.png) no-repeat;
											width: 18px;
											height: 18px;
											background-position: -165px -69px;
											&.active {
												background-position: -165px -51px;
											}
										}
									}//p.star
									p.name {
										margin-left: 30px;
										float: left;
										color: #919191;
										font-size: 14px;
									}
									p.time {
										margin-left: 15px;
										float: left;
										color: #919191;
										font-size: 14px;
									}
								}//name
								> .title {
									font-size: 16px;
									margin-top: 6px;
									color: $global-color;
									overflow: hidden;
								}
								> .content {
									margin-top: 20px;
									line-height: 16px;
									color: #919191;
								}
								> .rcontent {
									margin-top: 20px;
									p.title {
										height: 20px;
										color: #CFB995;
									}
									p.other {
										line-height: 16px;
										color: #888888;
									}
								}
								> .reply {
									margin-top: 20px;
									color: $global-color;
								}
								> .img {
									margin-top: 12px;
									max-width: 490px;
									img {
										width: 44px;
										height: 44px;
										margin-right: 12px;
									}
								}
								> .user-buy {
									position: absolute;
									top: 20px;
									right: 0;
									font-size: 14px;
									color: #919191;
									max-width: 200px;
									p {
										margin-bottom: 5px;
									}
								}//user-buy
							}//one
							.pagination {
							  position: absolute;
							  bottom: -60px;
							  right: 0;
							}
						}//comment
					}//tab-block-2
					.tab-block-3 {
						width: 100%;
						display: none;
						.top {
							padding: 20px 30px;
							border-bottom: 1px solid #CACACA;
							position: relative;
							.block {
								width: 33.333%;
								float: left;
								font-size: 16px;
								color: $global-color;
								position: relative;
								p.title {
									text-align: center;
									margin-bottom: 12px;
								}
								p.num {
									text-align: center;
									i {
										color: #DC4B4E;
										font-size: 26px;
									}
								}
								i.fence {
									width: 1px;
									height: 100%;
									position: absolute;
									top: 0;
									right: 0;
									background: #CACACA;
								}
							}//block
						}//top
						.lists {
							width: 100%;
							margin-top: 12px;
							margin-bottom: 140px;
							position: relative;
							.title {
								font-size: 14px;
								color: $global-color;
								margin-bottom: 20px;
								p {
									float: left;
									width: 22%;
									text-align: center;
									&.w-40 {
										width: 34%;
									}
								}
							}
							.one {
								width: 100%;
								border-bottom: 1px dashed #CACACA;
								color: #818181;
								p {
									float: left;
									width: 22%;
									text-align: center;
									line-height: 50px;
									height: 50px;
									&.w-40 {
										width: 34%;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
									&.times {
										span {
											height: 25px;
											line-height: 25px;
											display: block;
										}
									}
								}
							}//one
							.pagination {
							  position: absolute;
							  bottom: -60px;
							  right: 0;
							}
						}//lists
					}//tab-block-3
				}//show-area
			}//right
		}//bottom
	}//inner
}//goods
div.zoomDiv{
	z-index: 999;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
	background: #ffffff;
	border: 1px solid #c9c9c9;
	display: none;
	text-align: center;
	overflow: hidden;
}
div.zoomMask{
	position: absolute;
	background: #ccc;
	cursor: move;
	z-index: 1;
	opacity: 0.5;
	filter: Alpha(opacity=50);
}